<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-text与v-html</title>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			千米 : <input type="text" v-model="kilometers">
			米 : <input type="text" v-model="meters">
			<p>kilometers: {{kilometers}} </p>
			<p>meters: {{meters}}</p>
		</div>
		<p id="info"></p>
		
	</body>
	<script>
		//view model
		const app = {
			data() {
				return {
					kilometers: 0,
					meters: 0
				}
			},
			watch: {
				kilometers: function(val) {
					this.kilometers = val;
					this.meters = this.kilometers * 1000
				},
				meters: function(val) {
					this.kilometers = val / 1000;
					this.meters = val;
				}
			}
		}
		vm = Vue.createApp(app).mount('#app')
		vm.$watch('kilometers', function(newValue, oldValue) {
			// 这个回调将在 vm.kilometers 改变后调用
			document.getElementById("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
		})
	</script>
</html>
